$(function() {
    var layer = layui.layer
    var form = layui.form
    var laypage = layui.laypage;

    let A = {
        tagname: '',
        page: 1,
        limit: 10

    }

    renderCata()

    function renderCata() {
        axios({
                method: 'GET',
                url: '/ydd_tag/list',
                params: A
            })
            .then(function(res) {
                console.log(res);
                if (res.status !== 200) {
                    return layer.msg('更新分类数据失败！')
                }
                // layer.msg('更新分类数据成功！')
                let htmlStr = res.data.data.data.map((item, index) => {
                    return `<tr><th>${index+1}</th><th>${item.id}</th><th>${item.tagname}</th><td><i class="layui-icon layui-icon-edit btn-edit" data-id="${item.id}"></i><i class="layui-icon layui-icon-delete btn-delete" data-id="${item.id}"></i>   
                    </td></tr>`
                })
                $('tbody').html(htmlStr)
                renderPage(res.data.data.count)
            });
    }

    // 为添加类别按钮绑定点击事件
    var indexAdd = null
    $('#btnAddCate').on('click', function() {
        indexAdd = layer.open({
            type: 1,
            area: ['500px', '150px'],
            title: '添加分类',
            content: $('#dialog-add').html()
        })
    })

    //点击增加是请求数据
    function renderAdd() {

        $('body').on('click', '#add-Confirm', function(e) {

            e.preventDefault()
            axios({
                    method: 'POST',
                    url: '/ydd_tag/add',
                    data: {
                        tagname: $('input[name="name"]').val(),

                    },
                })
                .then(function(res) {
                    console.log(res);

                    if (res.status !== 200) {
                        return layer.msg('添加失败！')
                    }
                    layer.msg('添加成功！')
                    $('#dialog-add').hide()
                        // renderCata()
                    history.go(0)
                });

        })
    }
    renderAdd()

    // 编辑 获取数据
    $('body').on('click', '.btn-edit', function(e) {
        var indexEdit = null
        indexEdit = layer.open({
            type: 1,
            area: ['500px', '300px'],
            title: '修改分类',
            content: $('#dialog-edit').html()
        })
        var id = $(this).attr('data-id')
            // console.log(id);
            //发请求
        axios({
                method: 'GET',
                url: '/ydd_tag/rowInfo',
                params: {
                    id: id
                }
            })
            .then(function(res) {
                // console.log(res.data.data);
                form.val('form-edit', res.data.data)
            });
    })

    // 编辑修改发送请求
    $('body').on('submit', '#form-edit', function(e) {
        e.preventDefault()

        axios({
                method: 'POST',
                url: '/ydd_tag/update',
                data: $(this).serialize(),
            })
            .then(function(res) {
                console.log(res);
                if (res.data.errno !== 0) {
                    return layer.msg('修改失败！')
                }
                layer.msg('修改成功！')
                renderCata()
                history.go(0)

            });
    })

    //分页定义渲染方法
    function renderPage(totle) {
        console.log(totle);
        laypage.render({
            elem: 'pageBox', //注意，这里的 test1 是 ID，不用加 # 号  
            count: totle, //数据总数，从服务端得到
            limit: A.limit,
            curr: A.page,
            layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],
            limits: [2, 3, 5, 10],
            // 分页发生切换的时候，触发 jump 回调
            // 触发 jump 回调的方式有两种：
            // 1. 点击页码的时候，会触发 jump 回调
            // 2. 只要调用了 laypage.render() 方法，就会触发 jump 回调
            jump: function(obj, first) {
                // 可以通过 first 的值，来判断是通过哪种方式，触发的 jump 回调
                // 如果 first 的值为 true，证明是方式2触发的
                // 否则就是方式1触发的
                console.log(first)
                console.log(obj.curr)
                    // 把最新的页码值，赋值到 q 这个查询参数对象中
                A.page = obj.curr
                    // 把最新的条目数，赋值到 q 这个查询参数对象的 pagesize 属性中
                    // A.limit = obj.limit
                    // 根据最新的 q 获取对应的数据列表，并渲染表格

                if (!first) {
                    renderCata()
                }
            }
        });

    }


    //删除
    $('tbody').on('click', '.btn-delete', function() {
        console.log(123456);
        var id = $(this).attr('data-id')
        console.log(id);
        // 提示用户是否要删除
        layer.confirm('确认删除?', { icon: 3, title: '提示' }, function(index) {
            axios({
                    method: 'GET',
                    url: '/ydd_tag/del',
                    params: {
                        id: id
                    },
                })
                .then(function(res) {
                    console.log(res);
                    if (res.status !== 200) {
                        return layer.msg('删除分类失败！')
                    }
                    layer.msg('删除分类成功！')
                    layer.close(index)
                    renderCata()
                });

        })

    })



    // 搜索
    $('body').on('click', '#btn-search', function(e) {
            e.preventDefault()

            let value = $('.layui-input').val()
            console.log(value);
            axios({
                    method: 'GET',
                    url: '/ydd_tag/list',
                    params: A,
                })
                .then(function(res) {
                    console.log(res);

                    let newStr = res.data.data.data.filter(item => {
                        return item.tagname.includes(value)
                    })
                    console.log(newStr);


                    let htmlArr = newStr.map((item, index) => {
                        return `<tr><th>${index+1}</th><th>${item.id}</th><th>${item.tagname}</th><td><i class="layui-icon layui-icon-edit btn-edit" data-id="${item.id}"></i><i class="layui-icon layui-icon-delete btn-delete" data-id="${item.id}"></i>   
                    </td></tr>`
                    })
                    console.log(htmlArr.join(''));
                    $('tbody').html(htmlArr.join(''))

                });

        })
        // 重置
    $('#btn-reset').on('click', function() {
        renderCata()
        return alert('重置成功')
    })


    // 右边工具栏部分
    // 鼠标移入button按钮显示 移出隐藏
    $('#tip_btn').hover(function() {
        $('.filter_tip').show()
    }, function() {
        $('.filter_tip').hide()
    });

    $('#refresh_btn').hover(function() {
        $('.filter_refresh').show()
    }, function() {
        $('.filter_refresh').hide()
    });

    let isBtnTrue = true
    $('#tip_btn').on('click', function() {

        if (isBtnTrue) {
            $('.advpos_head').hide()
            $('.tip_info').html('打开搜索区')
            $('.layui-input-bar #change').removeClass('layui-icon-up').addClass('layui-icon-down')
            isBtnTrue = false
        } else {
            $('.advpos_head').show()
            $('.tip_info').html('关闭搜索区')
            $('.layui-input-bar #change').removeClass('layui-icon-down').addClass('layui-icon-up')
            isBtnTrue = true
        }
    });
    $('#refresh_btn').on('click', function() {
        history.go(0)
    });
    //点击工具盒子 这个按钮 filter_tooltip 显示 再次点击隐藏
    let isTool_BtnTrue = true
    $('#tooltip_btn').on('click', function() {


        if (isTool_BtnTrue) {
            $('.filter_tooltip').show()
            isTool_BtnTrue = false
        } else {
            $('.filter_tooltip').hide()
            isTool_BtnTrue = true
        }
    });



    $('.checkbox span').on('change', function() {
        console.log(1211);
        console.log($(this).prop('checked'));
        if ($(this).prop('checked')) {
            $('thead #cataID').show()
            $('tbody .cataID').show()
        } else {
            $('thead #cataID').hide()
            $('tbody .cataID').hide()
        }
    })
    $('.checkbox [name = cataName]').on('change', function() {
        if ($(this).prop('checked')) {
            $('thead #cataName').show()
            $('tbody .cataName').show()
        } else {
            $('thead #cataName').hide()
            $('tbody .cataName').hide()
        }
    })
    $('.checkbox [name = icon]').on('change', function() {
        if ($(this).prop('checked')) {
            $('thead #icon').show()
            $('tbody .icon').show()
        } else {
            $('thead #icon').hide()
            $('tbody .icon').hide()
        }
    })
    $('.checkbox [name = sort_num]').on('change', function() {
        if ($(this).prop('checked')) {
            $('thead #sort_num').show()
            $('tbody .sort_num').show()
        } else {
            $('thead #sort_num').hide()
            $('tbody .sort_num').hide()
        }
    })



})